<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="100px">
            <el-form-item label="线索电话" prop="phonenumber">
                <el-input v-model="queryParams.phonenumber" placeholder="请输入线索电话" clearable />
            </el-form-item>
            <el-form-item label="意向等级" prop="intentionRankList">
                <el-select v-model="queryParams.intentionRankList" multiple clearable>
                    <el-option v-for="(item, index) in Enmu.intentionRank2" :key="index" :label="item.name"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="预警等级" prop="warningStatusList">
                <el-select v-model="queryParams.warningStatusList" clearable multiple>
                    <el-option v-for="(item, index) in Enmu.warningStatus" :key="index" :label="item.name"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker clearable v-model="queryParams.starTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="开始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="录单员" prop="createName">
                <el-input v-model="queryParams.createName" placeholder="请输入录单员" clearable />
            </el-form-item>
            <el-form-item label="微信/QQ" prop="relationWay">
                <el-input v-model="queryParams.relationWay" placeholder="请输入微信/QQ" clearable />
            </el-form-item>
            <el-form-item label="线索状态" prop="clueStatusList">
                <el-select v-model="queryParams.clueStatusList" multiple clearable>
                    <el-option v-for="(item, index) in searchClueStatus" :key="index" :label="item.name"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分配状态" prop="status">
                <el-select v-model="queryParams.status" clearable>
                    <el-option label="待分配" :value="0"></el-option>
                    <el-option label="已分配" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker clearable v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="业务员" prop="currentFollowupMan">
                <el-input v-model="queryParams.currentFollowupMan" placeholder="请输入业务员" clearable />
            </el-form-item>
            <el-form-item label="始发地" prop="originPlace">
                <provice-select isShowDistrict @changeValue="queryStartChangeValue" :key="isProvice"></provice-select>
            </el-form-item>
            <el-form-item label="目的地" prop="endProvince">
                <provice-select isShowDistrict @changeValue="queryEndChangeValue" :key="isProvice"></provice-select>
            </el-form-item>
            <!-- <el-form-item label="车辆状态" prop="vehicleStatusList">
                <el-select v-model="queryParams.vehicleStatusList" clearable multiple>
                    <el-option v-for="(item, index) in carStatus" :value="item" :label="item" :key="index"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <!-- <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd('1')">新增</el-button>
        </el-col> -->
            <el-col :span="1.5">
                <el-button type="success" v-hasPermi="['crm:clue:distribution']" plain icon="el-icon-finished"
                    size="mini" @click="allocation({}, '2')">分配</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleUpload">导入</el-button>
        </el-col> -->
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-upload2" size="mini" @click="handleExport"
                    v-hasPermi="['system:clue:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="clueList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <!-- <el-table-column label="线索姓名" align="center" prop="nickName" />
            <el-table-column label="姓名" align="center" prop="kzNickname" /> -->
            <el-table-column label="手机号" align="center" prop="phonenumber" width="120" />
            <el-table-column label="微信/QQ" align="center" prop="relationWay" />
            <!-- <el-table-column label="线索编号" align="center" prop="kznum" /> -->
            <el-table-column label="咨客来源" align="center" prop="kznum">
                <template slot-scope="{row}">
                    {{ forrmatterEnmu(Enmu.sourceWeb, row.sourceWeb) }}
                </template>
            </el-table-column>
            <el-table-column label="品牌/车型" align="center" prop="vehicleTypeOne"></el-table-column>
            <el-table-column label="车辆状态" align="center" prop="vehicleStatus"></el-table-column>
            <!-- <el-table-column label="车辆型号" align="center" prop="vehicleTypeTwo" /> -->
            <el-table-column label="始发地" align="center">
                <template slot-scope="{row}">
                    <!-- <span v-if="row.province || row.city">{{ fomatterAdressName(row.province) }} / {{
                        fomatterAdressName(row.city) }} <span v-if="row.region">/ {{ fomatterAdressName(row.region)
                            }}</span></span> -->

                    <span>{{ row.originPlaceDetailName }}</span>

                </template>
            </el-table-column>
            <el-table-column label="目的地" align="center">
                <template slot-scope="{row}">
                    <!-- <span v-if="row.aimProvince || row.aimProvince">{{ fomatterAdressName(row.aimProvince) }} / {{
                        fomatterAdressName(row.aimCity) }} <span v-if="row.aimRegion">/ {{
                            fomatterAdressName(row.aimRegion)
                            }}</span></span> -->
                    <span>{{ row.aimPlaceDetailName }}</span>

                </template>
            </el-table-column>
            <el-table-column label="底价" align="center" prop="floorPrice" />
            <el-table-column label="报价" align="center" prop="price" />
            <el-table-column label="业务员" align="center" prop="currentFollowupMan" />
            <el-table-column label="录单员" align="center" prop="createName" />
            <el-table-column label="线索状态" align="center" prop="status">
                <template slot-scope="{ row }">
                    <span v-if="row.clueStatus == '1'" style="color: red">战败申请</span>
                    <span v-else>
                        {{
                            row.clueStatus == "5"
                                ? ""
                                : row.clueStatus == "6"
                                    ? ""
                                    : row.clueStatus == "8"
                                        ? ""
                                        : forrmatterEnmu(Enmu.clueStatus, row.clueStatus)
                        }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="意向等级" align="center" prop="status">
                <template slot-scope="{ row }">
                    <span v-if="!row.intentionRank && row.intentionRank != 0"></span>
                    <span v-else>
                        {{
                            forrmatterEnmu(Enmu.intentionRank, row.intentionRank + '')
                        }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="分配状态" align="center" prop="status">
                <template slot-scope="{row}">
                    {{ forrmatterEnmu(Enmu.followStatus, row.status) }}
                </template>
            </el-table-column>
            <el-table-column label="预警等级" align="center" prop="warningStatus">
                <template slot-scope="{row}">
                    <span v-if="row.warningStatus == 2">
                        <el-tag type="" color="#0000ff" effect="dark" :hit="false">
                            {{ forrmatterEnmu(Enmu.warningStatus, row.warningStatus) }}
                        </el-tag>
                    </span>
                    <span v-else-if="row.warningStatus == 4">
                        <el-tag type="" color="#FF7F00" effect="dark">
                            {{ forrmatterEnmu(Enmu.warningStatus, row.warningStatus) }}
                        </el-tag>
                    </span>
                    <span v-else-if="row.warningStatus == 3">
                        <el-tag type="" color="#ff0000" effect="dark">
                            {{ forrmatterEnmu(Enmu.warningStatus, row.warningStatus) }}
                        </el-tag>
                    </span>
                    <span v-else-if="row.warningStatus == 1">
                        <el-tag type="" color="#F4A708" effect="dark" :hit="true">
                            {{ forrmatterEnmu(Enmu.warningStatus, row.warningStatus) }}
                        </el-tag>
                    </span>
                    <span v-else>
                        <el-tag type="" effect="dark">
                            {{ forrmatterEnmu(Enmu.warningStatus, row.warningStatus) }}
                        </el-tag>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="线索时间" align="center" prop="createTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                    <el-button size="mini" type="text" v-hasPermi="['crm:clue:distribution']"
                        @click="queryInfo(row)">查看</el-button>
                    <el-button size="mini" type="text" v-hasPermi="['crm:clue:distribution']"
                        @click="allocation(row, 2)">分配</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <detail-dialog :showDialog="showDetailDialog" :baseInfo="baseInfo" :pageType="pageType"
            @close="close"></detail-dialog>

        <el-dialog width="700px" :title="dialogFlag == '1' ? '新增' : '分配'" :visible.sync="innerVisible" append-to-body>
            <div>
                <el-form :model="addForm" ref="addForm" :inline="true" label-width="100px" v-if="dialogFlag == '1'">
                    <el-form-item label="姓名">
                        <el-input style="width: 220px;" v-model="addForm.kzNickname"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input style="width: 220px;" v-model="addForm.kzphoneNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌/车型">
                        <el-select v-model="addForm.vehicleTypeOne" style="width: 220px;">
                            <el-option v-for="item, index in Enmu.vehicleType" :value="item.name" :label="item.name"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="始发地">
                        <provice-select :defaultCity="defaultCity" @changeValue="queryStartChangeValue"
                            :inputWidth="150"></provice-select>
                    </el-form-item>
                    <el-form-item label="目的地">
                        <provice-select :defaultCity="defaultAimCity" @changeValue="queryEndChangeValue"
                            :inputWidth="150"></provice-select>
                    </el-form-item>
                    <el-form-item label="线索来源">
                        <el-select v-model="addForm.sourceWeb" style="width: 220px;">
                            <el-option v-for="item, index in Enmu.sourceWeb" :value="item.value" :label="item.name"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" label-width="100px" v-if="dialogFlag == '2'">
                    <el-form-item label="销售员列表">
                        <el-select v-model="selectMarketIds" style="width: 220px;">
                            <el-option v-for="item, index in marketList" :key="index" :value="item"
                                :label="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button @click="innerVisible = false">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog width="500px" title="导入" :visible.sync="uploadDialog" append-to-body>
            <div>
                <el-upload class="upload-demo" :action="fileUpload" accept=".xls,.xlsx" :auto-upload="true" multiple
                    :limit="1" :file-list="fileList" :headers="headers" :on-success="uploadSuccess">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
                </el-upload>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="uploadDialog = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listPublicClue } from "@/api/crm/highSeasClue";
import { addClue, getMarketList, manualDistribution } from "@/api/crm/clueLibrary";
import DetailDialog from "./detailDialog.vue";
import ProviceSelect from "@/components/ProviceSelect/index.vue"
import Enmu from '@/utils/enmu.js'
import { forrmatterEnmu } from "@/utils/index"
import { mapGetters } from "vuex"
import { getToken } from "@/utils/auth";
export default {
    name: "Clue",
    data() {
        return {
            fileUpload: process.env.VUE_APP_BASE_API + "/clue/admin/batchImportClue",
            headers: {
                Authorization: "Bearer " + getToken()
            },
            // 显示搜索条件
            showSearch: true,
            // 非单个禁用
            single: true,
            ids: [],
            // 非多个禁用
            multiple: true,
            Enmu,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                kznum: null,
                phonenumber: null,
                province: null,
                city: null,
                aimProvince: null,
                aimCity: null,
                currentFollowupMan: null,
                status: null,
                starTime: null,
                endTime: null,
                clueStatus: null,
                createName: null,
                vehicleStatusList: [],
                warningStatusList: [],
                relationWay: null,
                intentionRankList: null
            },
            baseInfo: {},
            showDetailDialog: false,
            innerVisible: false,
            addForm: {},
            loading: false,
            clueList: [],
            total: 0,
            defaultAimCity: {},
            defaultCity: {},
            // 1 新增  2 分配
            dialogFlag: '2',
            allocationClueId: [],
            marketList: [],
            selectMarketIds: '',
            fileList: [],
            uploadDialog: false,
            isProvice: true,
            pageType: '1',
            carStatus: [
                "新车",
                "二手车",
                "燃油车",
                "新能源",
                // "正常车辆",
                "故障车",
                "抵押车",
                "亏油",
                "亏电",
                // "油电亏损车辆",
                "非常规车辆（三轮车、摩托车、改装车、商用车、超尺寸车辆）",
            ],
            searchClueStatus: [
                // {
                //     value: "1",
                //     name: "战败申请",
                // },
                // {
                //     value: "2",
                //     name: "无效申请",
                // },
                {
                    value: "4",
                    name: "确认战败",
                },
                {
                    value: "7",
                    name: "确认无效",
                },
            ],
        };

    },
    components: { DetailDialog, ProviceSelect },
    created() {
        this.getList();
        this.listMarket();
    },
    computed: {
        ...mapGetters(['allCityList'])
    },
    methods: {
        forrmatterEnmu,
        // 省市区转换成中文
        fomatterAdressName(code) {
            let index = this.allCityList.findIndex(ele => ele.id == code);
            return index > -1 ? this.allCityList[index].cityName : code;
        },
        queryStartChangeValue(values) {
            this.queryParams.province = values[0]
            this.queryParams.city = values[1]
            this.queryParams.district = values[2]
        },
        queryEndChangeValue(values) {
            this.queryParams.aimProvince = values[0]
            this.queryParams.aimCity = values[1]
            this.queryParams.aimDistrict = values[2]
        },
        close() {
            this.showDetailDialog = false;
            this.getList();
        },
        queryInfo(row) {
            this.showDetailDialog = true;
            this.baseInfo = { ...row };
            if (row.clueStatus == '5' || row.clueStatus == '6' || row.clueStatus == "8") {
                this.pageType = '1'
            } else {
                this.pageType = '3'
            }
        },
        /** 查询【请填写功能名称】列表 */
        getList() {
            this.loading = true;
            listPublicClue(this.queryParams).then(response => {
                this.clueList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleAdd(index) {
            this.resetQueryForm();
            this.innerVisible = true;
            this.dialogFlag = index;
        },
        resetQueryForm() {
            this.addForm = {
                kzNickname: null,
                kzphoneNumber: null,
                vehicleTypeOne: null,
                sourceWeb: null,
                province: null,
                city: null,
                region: null,
                aimProvince: null,
                aimCity: null,
                aimRegion: null
            }
        },
        submitForm() {
            if (this.dialogFlag == '1') {
                addClue(this.addForm).then(res => {
                    if (res.code == 200) {
                        this.$modal.msgSuccess("新增成功");
                        this.innerVisible = false;
                        this.getList();
                    }
                })
            } else if (this.dialogFlag == '2') {
                manualDistribution({ clueIdList: this.allocationClueId, currentFollowupMan: this.selectMarketIds }).then(res => {
                    if (res.code == 200) {
                        this.$modal.msgSuccess("分配成功");
                        this.innerVisible = false;
                        this.getList();
                    }
                })
            }

        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams = {};
            this.handleQuery();
            this.isProvice = !this.isProvice
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('/clue/admin/highSeasExportSelect', {
                ...this.queryParams
            }, `clue_${new Date().getTime()}.xlsx`)
        },
        allocation(row, index) {
            if (!row.clueId) {
                if (this.ids.length <= 0) {
                    this.$modal.msgWarning("请先选择线索");
                    return;
                } else {
                    this.allocationClueId = this.ids;
                }
            } else {
                this.allocationClueId = [row.clueId];
            }
            this.innerVisible = true;
            this.dialogFlag = index;
        },
        // 获取业务员员列表
        listMarket() {
            getMarketList().then(res => {
                this.marketList = res.data;
            })
        },
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.clueId)
            this.single = selection.length !== 1
            this.multiple = !selection.length;
            this.allocationClueId = this.ids;
        },
        handlePreview(file) {
            console.log(file)
        },
        handleUpload() {
            this.uploadDialog = true;
        },
        uploadSuccess() {
            this.$modal.msgSuccess("上传成功");
            this.uploadDialog = false;
            this.getList();
        }

    }
};
</script>
<style lang="scss" scoped>
.row-between {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

::v-deep .el-timeline-item__node {
    background-color: #02A7F0 !important;
}

::v-deep .el-timeline-item__tail {
    position: absolute;
    left: 4px;
    height: 100%;
    border-left: 2px solid #02A7F0;
}
</style>